Ember.js অ্যাপ্লিকেশন কনফিগারেশন config/environment.js ফাইলে সংরক্ষিত থাকে। এই ফাইলের মাধ্যমে বিভিন্ন পরিবেশ (ডেভেলপমেন্ট, প্রোডাকশন, এবং টেস্ট) অনুযায়ী অ্যাপ্লিকেশন কাস্টমাইজ করা যায়। এছাড়াও, কিছু সাধারণ কনফিগারেশন সেটআপ যেমন rootURL, locationType, এবং EmberENV ইত্যাদি করা হয়।
কনফিগারেশন ফাইল: config/environment.js
Ember.js অ্যাপ্লিকেশনের মূল কনফিগারেশন ফাইল। এটির ডিফল্ট গঠন নিচের মতো:
module.exports = function (environment) {
let ENV = {
modulePrefix: 'my-app', // অ্যাপ্লিকেশনের নাম
environment,
rootURL: '/', // অ্যাপ্লিকেশনের URL রুট
locationType: 'auto', // URL ব্যবস্থাপনার ধরণ
EmberENV: {
FEATURES: {
// পরীক্ষামূলক ফিচার সক্রিয় করতে ব্যবহার করুন
},
},
APP: {
// অ্যাপ্লিকেশনের কাস্টম কনফিগারেশন
},
};
if (environment === 'development') {
// ডেভেলপমেন্ট পরিবেশের জন্য কাস্টম কনফিগারেশন
ENV.APP.LOG_RESOLVER = true;
ENV.APP.LOG_ACTIVE_GENERATION = true;
ENV.APP.LOG_TRANSITIONS = true;
ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
ENV.APP.LOG_VIEW_LOOKUPS = true;
}
if (environment === 'test') {
// টেস্ট পরিবেশের জন্য কাস্টম কনফিগারেশন
ENV.locationType = 'none';
ENV.APP.LOG_ACTIVE_GENERATION = false;
ENV.APP.LOG_VIEW_LOOKUPS = false;
ENV.APP.rootElement = '#ember-testing';
ENV.APP.autoboot = false;
}
if (environment === 'production') {
// প্রোডাকশন পরিবেশের জন্য কাস্টম কনফিগারেশন
ENV.rootURL = '/production-app/';
}
return ENV;
};
কনফিগারেশন উপাদানসমূহ
১. modulePrefix
- অ্যাপ্লিকেশনের নাম বা মডিউল প্রিফিক্স।
- এটি Ember.js-এর জন্য ডিফল্ট স্পেসিফায়ার।
২. environment
- অ্যাপ্লিকেশনের চলমান পরিবেশ, যেমন development, production, বা test।
৩. rootURL
- অ্যাপ্লিকেশনের URL-এর রুট।
- ডিফল্ট:
'/' - প্রোডাকশন পরিবেশে এটি পরিবর্তন করে সাবডিরেক্টরি বা কাস্টম URL ব্যবহার করা যায়।
৪. locationType
- Ember.js-এ URL ব্যবস্থাপনার ধরণ নির্দেশ করে। সাধারণত ব্যবহৃত ধরণগুলো:
auto: ব্রাউজারের পছন্দসই পদ্ধতি নির্বাচন।hash: URL-এ হ্যাশ (#) ব্যবহার।history: ব্রাউজারের ইতিহাস API ব্যবহার।none: টেস্টিংয়ের জন্য।
৫. EmberENV
- পরীক্ষামূলক বা উন্নয়নমূলক ফিচার সক্রিয় করতে ব্যবহৃত হয়।
উদাহরণ:
EmberENV: { FEATURES: { 'new-feature': true, // নতুন ফিচার সক্রিয় }, },
৬. APP
- অ্যাপ্লিকেশনের কাস্টম কনফিগারেশন সংরক্ষণ করে।
উদাহরণ:
APP: { apiEndpoint: 'https://api.example.com', // API এন্ডপয়েন্ট },
পরিবেশ অনুযায়ী কনফিগারেশন
Development (ডিফল্ট)
ডেভেলপমেন্টে অতিরিক্ত লগ এবং ডিবাগিং সক্রিয় রাখা হয়। উদাহরণ:
if (environment === 'development') {
ENV.APP.LOG_TRANSITIONS = true;
}
Production
প্রোডাকশনে প্রয়োজনীয় কনফিগারেশন করা হয়, যেমন rootURL নির্ধারণ বা নির্দিষ্ট ফিচার নিষ্ক্রিয় করা:
if (environment === 'production') {
ENV.rootURL = '/my-production-app/';
}
Test
টেস্টিং পরিবেশের জন্য আলাদা কনফিগারেশন থাকে। উদাহরণ:
if (environment === 'test') {
ENV.locationType = 'none';
ENV.APP.rootElement = '#ember-testing';
}
বিল্ড কনফিগারেশন: ember-cli-build.js
এটি অ্যাপ্লিকেশনের বিল্ড প্রক্রিয়া এবং অ্যাসেট কাস্টমাইজেশনের জন্য ব্যবহৃত হয়। উদাহরণ:
'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function (defaults) {
let app = new EmberApp(defaults, {
// কাস্টম অপশন যুক্ত করুন
fingerprint: {
enabled: true, // অ্যাসেট ফিঙ্গারপ্রিন্টিং সক্রিয়
},
});
return app.toTree();
};
কনফিগারেশন আপডেট করার সময় পরামর্শ
- পরিবেশ অনুযায়ী আলাদা সেটিংস ব্যবহার করুন: ডেভেলপমেন্ট, প্রোডাকশন, এবং টেস্টিংয়ের জন্য ভিন্ন কনফিগারেশন সেটআপ করুন।
- লগিং এবং ডিবাগিং সীমিত রাখুন: প্রোডাকশন পরিবেশে অতিরিক্ত লগ এবং ডিবাগিং নিষ্ক্রিয় রাখুন।
- কাস্টম কনফিগারেশন যুক্ত করুন: অ্যাপ্লিকেশনের প্রয়োজন অনুযায়ী কাস্টম সেটিংস যোগ করুন।
এই বেসিক কনফিগারেশনগুলো Ember.js অ্যাপ্লিকেশনকে সুসংহতভাবে পরিচালনা করতে সহায়তা করে। পরিবেশ অনুযায়ী কনফিগারেশন ব্যবহার করে অ্যাপ্লিকেশন ডেভেলপমেন্ট আরও সহজ এবং কার্যকর করা যায়।
Ember.js অ্যাপ্লিকেশন একটি সুগঠিত ডিরেক্টরি স্ট্রাকচার ব্যবহার করে, যা প্রজেক্টের বিভিন্ন উপাদান আলাদা রাখে। এটি কোড সংরক্ষণ, পরিচালনা, এবং ডেভেলপমেন্ট সহজ করে তোলে। এখানে প্রতিটি ডিরেক্টরি এবং এর উদ্দেশ্য ব্যাখ্যা করা হলো।
ডিরেক্টরি স্ট্রাকচার এবং ভূমিকা
project-name/
├── app/
├── config/
├── node_modules/
├── public/
├── tests/
├── vendor/
├── tmp/
├── ember-cli-build.js
├── package.json
├── .ember-cli
├── README.md
app/ ডিরেক্টরি
এটি প্রজেক্টের মূল সোর্স কোড ধারণ করে। এখানে অ্যাপ্লিকেশনের মডেল, ভিউ, কন্ট্রোলার, রাউট, এবং কম্পোনেন্ট সংরক্ষিত হয়।
app এর প্রধান সাব-ডিরেক্টরি:
- components/
পুনঃব্যবহারযোগ্য UI উপাদান তৈরি ও সংরক্ষণ।
উদাহরণ: একটি বাটন কম্পোনেন্ট বা নেভিগেশন মেনু। - controllers/
রাউটের সাথে যুক্ত কন্ট্রোলারের লজিক।
উদাহরণ: ডেটা ম্যানিপুলেশন এবং ভিউ-র মডেল প্রাসঙ্গিক লজিক। - models/
অ্যাপ্লিকেশনের ডেটা কাঠামো এবং API এর মাধ্যমে ডেটা পরিচালনা।
উদাহরণ: ব্যবহারকারী বা প্রোডাক্ট মডেল। - routes/
রাউট সম্পর্কিত লজিক। এটি কন্ট্রোলার এবং টেমপ্লেটের মধ্যে ডেটা সংযোগ স্থাপন করে।
উদাহরণ: ব্যবহারকারীর তালিকা রাউট। - templates/
অ্যাপ্লিকেশনের UI তৈরি করতে ব্যবহৃত HTMLBars টেমপ্লেট।
উদাহরণ: হোমপেজ বা ড্যাশবোর্ডের ভিজ্যুয়াল লেআউট। - styles/
অ্যাপ্লিকেশনের CSS বা SCSS ফাইল সংরক্ষণ।
উদাহরণ: কাস্টম স্টাইলিং। - helpers/
ছোটখাটো জাভাস্ক্রিপ্ট ফাংশন, যা টেমপ্লেটে পুনঃব্যবহারযোগ্য লজিক যোগ করে।
উদাহরণ: একটি টেক্সট ফরম্যাটিং হেল্পার। - services/
অ্যাপ্লিকেশনের বিভিন্ন স্থানে ব্যবহারের জন্য শেয়ারযোগ্য ডেটা বা লজিক।
উদাহরণ: অথেন্টিকেশন বা ডেটা ক্যাশিং।
config/ ডিরেক্টরি
এই ডিরেক্টরিতে অ্যাপ্লিকেশনের কনফিগারেশন ফাইল থাকে।
- environment.js
ডেভেলপমেন্ট, প্রোডাকশন, এবং টেস্ট পরিবেশের জন্য আলাদা কনফিগারেশন সেটআপ।
node_modules/ ডিরেক্টরি
এই ফোল্ডারটি npm প্যাকেজ ম্যানেজারের মাধ্যমে ইনস্টল করা সমস্ত ডিপেন্ডেন্সি সংরক্ষণ করে।
- সাধারণত এটি ম্যানুয়ালি সম্পাদনা করা হয় না।
public/ ডিরেক্টরি
এটি স্ট্যাটিক ফাইল যেমন ইমেজ, ফন্ট, এবং অন্যান্য সম্পদের জন্য ব্যবহৃত হয়।
- উদাহরণ:
public/images/logo.png
tests/ ডিরেক্টরি
এটি অ্যাপ্লিকেশনের জন্য টেস্ট ফাইল সংরক্ষণ করে। টেস্টিং করার সময় এই ফোল্ডার ব্যবহৃত হয়।
tests এর প্রধান সাব-ডিরেক্টরি:
- acceptance/: পুরো অ্যাপ্লিকেশন বা বড় অংশের টেস্টিং।
- integration/: কম্পোনেন্ট এবং টেমপ্লেটের টেস্ট।
- unit/: মডেল বা সার্ভিসের টেস্ট।
vendor/ ডিরেক্টরি
তৃতীয় পক্ষের লাইব্রেরি বা কাস্টম জাভাস্ক্রিপ্ট এবং CSS ফাইল সংরক্ষণ।
tmp/ ডিরেক্টরি
এটি Ember.js এর বিল্ড প্রক্রিয়ার সময় অস্থায়ী ফাইল সংরক্ষণ করে।
- এটি প্রোডাকশনের জন্য গুরুত্বপূর্ণ নয় এবং সাধারণত উপেক্ষা করা হয়।
গুরুত্বপূর্ণ ফাইল এবং তাদের ভূমিকা
- ember-cli-build.js
অ্যাপ্লিকেশনের বিল্ড প্রক্রিয়া সংক্রান্ত কনফিগারেশন। - package.json
npm প্যাকেজ এবং স্ক্রিপ্ট সংক্রান্ত তথ্য। - .ember-cli
Ember CLI এর ডিফল্ট কনফিগারেশন। - README.md
প্রজেক্টের বিবরণ এবং ডকুমেন্টেশন।
Ember.js ডিরেক্টরি স্ট্রাকচারের বিশেষত্ব
- MVC প্যাটার্ন ফলো করা: মডেল, ভিউ, এবং কন্ট্রোলার আলাদা ফোল্ডারে থাকে।
- পুনঃব্যবহারযোগ্য কোড স্ট্রাকচার: কম্পোনেন্ট এবং সার্ভিস ভিত্তিক ডিজাইন।
- সহজ টেস্টিং:
tests/ডিরেক্টরি অ্যাপ্লিকেশনের টেস্টিংকে সহজ করে।
এই সুগঠিত ডিরেক্টরি স্ট্রাকচার Ember.js অ্যাপ্লিকেশন তৈরি এবং পরিচালনাকে সুসংহত এবং কার্যকর করে তোলে। এটি বড় অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য আদর্শ।
Ember CLI (Command Line Interface) হল Ember.js অ্যাপ্লিকেশন তৈরি, পরিচালনা, এবং ডিপ্লয় করার জন্য ব্যবহৃত একটি শক্তিশালী টুল। এটি অ্যাপ্লিকেশন ডেভেলপমেন্টের প্রক্রিয়াকে সহজ এবং দ্রুত করে তোলে। Ember CLI ব্যবহারকারীদের দ্রুত অ্যাপ্লিকেশন তৈরি, বিল্ড এবং টেস্টিং করার জন্য প্রয়োজনীয় কমান্ড সরবরাহ করে।
Ember CLI এর প্রাথমিক ব্যবহার
Ember CLI আপনাকে অ্যাপ্লিকেশন তৈরি, রাউট, কম্পোনেন্ট, মডেল এবং অন্যান্য প্রয়োজনীয় ফাইল দ্রুত এবং সহজে তৈরি করতে সহায়তা করে। এটি কমান্ড লাইন থেকে Ember.js অ্যাপ্লিকেশন পরিচালনা করতে ব্যবহৃত হয়।
Ember CLI এর কমান্ডসমূহ
১. Ember New
নতুন Ember.js অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়।
ember new project-name
এখানে project-name আপনার প্রোজেক্টের নাম।
২. Ember Serve
এটি ডেভেলপমেন্ট সার্ভার চালু করে এবং আপনার অ্যাপ্লিকেশন দেখতে http://localhost:4200/ লিঙ্কে নিয়ে যায়।
ember serve
আপনি চাইলে পোর্ট নম্বর পরিবর্তন করতে পারেন:
ember serve --port 4300
৩. Ember Generate
নতুন ফাইল বা উপাদান তৈরি করতে ব্যবহৃত হয়। এটি routes, controllers, models, components, helpers ইত্যাদি তৈরি করতে সাহায্য করে।
ember generate model user
ember generate component user-profile
ember generate route about
ember generate controller login
- model: একটি নতুন মডেল ফাইল তৈরি করে।
- component: একটি নতুন কম্পোনেন্ট ফাইল তৈরি করে।
- route: একটি নতুন রাউট ফাইল তৈরি করে।
- controller: একটি নতুন কন্ট্রোলার ফাইল তৈরি করে।
৪. Ember Destroy
এই কমান্ডটি Ember Generate কমান্ডের বিপরীত, এটি তৈরি করা ফাইল বা উপাদান মুছে ফেলে।
ember destroy model user
ember destroy component user-profile
৫. Ember Build
এই কমান্ডটি অ্যাপ্লিকেশনের জন্য একটি প্রোডাকশন-রেডি বিল্ড তৈরি করে। এটি dist/ ফোল্ডারে বিল্ড ফাইল সংরক্ষণ করে।
ember build
প্রোডাকশন পরিবেশে বিল্ড করতে:
ember build --environment=production
৬. Ember Test
এটি অ্যাপ্লিকেশনের টেস্ট চালানোর জন্য ব্যবহৃত হয়। টেস্ট কমান্ড চালালে সমস্ত ইউনিট, ইনটিগ্রেশন এবং অ্যাকসেপ্টেন্স টেস্ট চালানো হয়।
ember test
টেস্ট সার্ভার চালানোর জন্য:
ember test --server
৭. Ember Deploy
এই কমান্ডটি অ্যাপ্লিকেশন ডিপ্লয় করার জন্য ব্যবহৃত হয়, যা সাধারণত প্রোডাকশনে ডিপ্লয়মেন্টের জন্য ব্যবহৃত হয়।
ember deploy production
৮. Ember Install
এই কমান্ডটি Ember.js অ্যাপ্লিকেশনে প্যাকেজ ইনস্টল করতে ব্যবহৃত হয়। এটি নতুন Ember প্যাকেজ বা থার্ড-পার্টি লাইব্রেরি ইনস্টল করে।
ember install ember-cli-mirage
৯. Ember Routes
এটি অ্যাপ্লিকেশনের রাউট সম্পর্কিত তথ্য প্রদর্শন করতে ব্যবহৃত হয়।
ember routes
Ember CLI-এর অতিরিক্ত কমান্ড
Ember Add: নতুন থার্ড-পার্টি প্যাকেজ বা লাইব্রেরি অ্যাপ্লিকেশনে যুক্ত করার জন্য।
ember add ember-cli-bootstrapEmber Help: Ember CLI এর সমস্ত কমান্ড এবং ব্যবহারের তথ্য প্রদর্শন করে।
ember helpEmber Version: Ember CLI এবং অ্যাপ্লিকেশনের সংস্করণ দেখার জন্য।
ember -v
Ember CLI এর সুবিধা
- স্বয়ংক্রিয় ফাইল তৈরি: কমান্ডের মাধ্যমে দ্রুত মডেল, কম্পোনেন্ট, রাউট তৈরি করা সম্ভব।
- বিল্ড সিস্টেম: প্রোডাকশনের জন্য অ্যাপ্লিকেশন বিল্ড করতে ember build কমান্ড ব্যবহার করা যায়।
- টেস্টিং এবং ডিবাগিং: ember test এবং ember serve এর মাধ্যমে ডেভেলপমেন্ট এবং টেস্টিং সহজে পরিচালনা করা যায়।
- কমপ্লিট ডেভেলপমেন্ট টুলস: ember install, ember deploy এর মাধ্যমে তৃতীয় পক্ষের প্যাকেজ ইনস্টল এবং অ্যাপ্লিকেশন ডিপ্লয় করা যায়।
Ember CLI ব্যবহার করে আপনি Ember.js অ্যাপ্লিকেশন ডেভেলপমেন্টকে অনেক দ্রুত এবং সুসংগঠিতভাবে পরিচালনা করতে পারবেন। এর কমান্ডসমূহ প্রজেক্টের ফাইল ম্যানেজমেন্ট, টেস্টিং, এবং ডিপ্লয়মেন্টে সহায়ক।
Ember.js অ্যাপ্লিকেশন তৈরি করার সময়, Ember CLI কিছু ডিফল্ট কনফিগারেশন সরবরাহ করে যা অ্যাপ্লিকেশনের আচরণ এবং কাস্টমাইজেশন সহজ করে তোলে। এই ডিফল্ট কনফিগারেশন config/environment.js ফাইলে সংরক্ষিত থাকে। এই কনফিগারেশন ফাইলটি বিভিন্ন পরিবেশ (ডেভেলপমেন্ট, প্রোডাকশন, টেস্ট) অনুযায়ী কাস্টমাইজ করা যায়।
এখানে Ember.js অ্যাপ্লিকেশনের ডিফল্ট কনফিগারেশন এবং এর প্রাথমিক কাস্টমাইজেশন ব্যাখ্যা করা হয়েছে।
Ember.js এর ডিফল্ট কনফিগারেশন
প্রথমে config/environment.js ফাইলের ডিফল্ট কনফিগারেশন দেখুন:
module.exports = function (environment) {
let ENV = {
modulePrefix: 'my-app',
environment,
rootURL: '/',
locationType: 'auto',
EmberENV: {
FEATURES: {
// পরীক্ষামূলক ফিচার সক্রিয় করতে ব্যবহার করুন
},
},
APP: {
// অ্যাপ্লিকেশনের কাস্টম কনফিগারেশন
},
};
if (environment === 'development') {
// ডেভেলপমেন্ট পরিবেশে অতিরিক্ত লোগিং এবং ডিবাগিং
ENV.APP.LOG_RESOLVER = true;
ENV.APP.LOG_ACTIVE_GENERATION = true;
ENV.APP.LOG_TRANSITIONS = true;
ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
ENV.APP.LOG_VIEW_LOOKUPS = true;
}
if (environment === 'production') {
// প্রোডাকশন পরিবেশে কাস্টম কনফিগারেশন
ENV.rootURL = '/production-app/';
}
if (environment === 'test') {
// টেস্টিং পরিবেশের জন্য কনফিগারেশন
ENV.locationType = 'none';
ENV.APP.LOG_ACTIVE_GENERATION = false;
ENV.APP.LOG_VIEW_LOOKUPS = false;
ENV.APP.rootElement = '#ember-testing';
ENV.APP.autoboot = false;
}
return ENV;
};
এটি Ember.js অ্যাপ্লিকেশনের বিভিন্ন পরিবেশের জন্য ডিফল্ট কনফিগারেশন প্রদান করে, যা অ্যাপ্লিকেশন পরিচালনার জন্য ব্যবহৃত হয়।
ডিফল্ট কনফিগারেশন এর প্রধান উপাদান
- modulePrefix: অ্যাপ্লিকেশনের নাম।
- modulePrefix হলো Ember.js অ্যাপ্লিকেশনের নাম, যা সাধারণত
my-appথাকে।
- modulePrefix হলো Ember.js অ্যাপ্লিকেশনের নাম, যা সাধারণত
- environment: পরিবেশ (environment) এর মান।
- এটি তিনটি পরিবেশকে সাপোর্ট করে: development, production, test।
- rootURL: অ্যাপ্লিকেশনের রুট URL।
- প্রাথমিকভাবে
/থাকে, তবে আপনি প্রোডাকশন বা অন্যান্য পরিবেশে এটি কাস্টমাইজ করতে পারেন।
- প্রাথমিকভাবে
- locationType: URL ম্যানেজমেন্টের ধরন।
auto: ব্রাউজারের পছন্দসই পদ্ধতি নির্বাচন।history: ইতিহাস API ব্যবহৃত হয়।hash: হ্যাশ (#) ব্যবহার করা হয়।none: টেস্টিং উদ্দেশ্যে ব্যবহৃত।
- EmberENV: পরীক্ষামূলক ফিচার এবং অন্যান্য পরিবেশ সেটিংস।
- APP: অ্যাপ্লিকেশনের কাস্টম কনফিগারেশন।
- এখানে আপনি কাস্টম সেটিংস বা API এন্ডপয়েন্ট সংজ্ঞায়িত করতে পারেন।
প্রাথমিক কাস্টমাইজেশন
এখন, আমরা এই ডিফল্ট কনফিগারেশন ফাইলটিতে কিছু প্রাথমিক কাস্টমাইজেশন যুক্ত করব।
১. Root URL কাস্টমাইজেশন (প্রোডাকশন পরিবেশ)
আপনার অ্যাপ্লিকেশন যদি প্রোডাকশন পরিবেশে বিশেষ কোনো সাবডিরেক্টরিতে চলতে থাকে, তবে rootURL কাস্টমাইজ করা যায়:
if (environment === 'production') {
ENV.rootURL = '/my-app/'; // এখানে আপনার প্রোডাকশন URL প্রদান করুন
}
২. কাস্টম API এন্ডপয়েন্ট সেট করা
কোনও কাস্টম API এন্ডপয়েন্ট যুক্ত করতে, আপনি APP অপশনে সেটিংস করতে পারেন:
APP: {
apiEndpoint: 'https://api.example.com', // API এন্ডপয়েন্ট
featureFlag: true, // কোনও ফিচার ফ্ল্যাগ
}
এটি পরে আপনার অ্যাপ্লিকেশনে ব্যবহার করা যেতে পারে।
৩. টেস্টিং পরিবেশ কাস্টমাইজেশন
টেস্টিং পরিবেশের জন্য অতিরিক্ত কনফিগারেশন প্রয়োজন হলে তা করতে পারেন:
if (environment === 'test') {
ENV.locationType = 'none'; // টেস্টে URL ব্যবস্থাপনা বন্ধ রাখা
ENV.APP.LOG_ACTIVE_GENERATION = false; // টেস্টে লগ নিষ্ক্রিয় করা
ENV.APP.rootElement = '#ember-testing'; // টেস্টের DOM এলিমেন্ট পরিবর্তন করা
}
৪. ডেভেলপমেন্ট পরিবেশে অতিরিক্ত লোগিং
ডেভেলপমেন্ট পরিবেশে অতিরিক্ত লগিং সক্ষম করতে:
if (environment === 'development') {
ENV.APP.LOG_RESOLVER = true;
ENV.APP.LOG_ACTIVE_GENERATION = true;
ENV.APP.LOG_TRANSITIONS = true;
ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
ENV.APP.LOG_VIEW_LOOKUPS = true;
}
এটি ডেভেলপমেন্ট সময়ে কম্পোনেন্ট, রাউট, ভিউ এবং অন্যান্য কার্যকলাপের ট্র্যাকিং সক্ষম করবে।
পরিবেশ অনুযায়ী কনফিগারেশন সেট করা
Ember.js প্রজেক্টে তিনটি প্রধান পরিবেশ থাকে: development, production, এবং test। প্রতিটি পরিবেশের জন্য আলাদা কনফিগারেশন সেট করতে আপনি environment.js ফাইলটি কাস্টমাইজ করতে পারেন।
ডেভেলপমেন্ট পরিবেশ:
if (environment === 'development') {
ENV.APP.LOG_TRANSITIONS = true; // রাউট ট্রানজিশনের লগ দেখা
}
প্রোডাকশন পরিবেশ:
if (environment === 'production') {
ENV.rootURL = '/production-app/';
}
টেস্ট পরিবেশ:
if (environment === 'test') {
ENV.locationType = 'none';
}
Ember.js কনফিগারেশন ফাইলের সুবিধা
- একটি স্থান থেকে সমস্ত কনফিগারেশন পরিচালনা: environment.js ফাইলটি সকল পরিবেশের কনফিগারেশন একত্রিত করে।
- পরিবেশ নির্ভর কনফিগারেশন: প্রতিটি পরিবেশের জন্য আলাদা কনফিগারেশন তৈরি করা সম্ভব, যা অ্যাপ্লিকেশনকে আরও শক্তিশালী এবং কার্যকরী করে তোলে।
- সহজ কাস্টমাইজেশন: আপনার প্রয়োজন অনুসারে সহজেই কনফিগারেশন আপডেট বা পরিবর্তন করা যায়।
Ember.js এর ডিফল্ট কনফিগারেশন এবং কাস্টমাইজেশন আপনাকে অ্যাপ্লিকেশন পরিচালনায় আরও নমনীয়তা প্রদান করে, যা ডেভেলপমেন্ট, প্রোডাকশন, এবং টেস্টিং পরিবেশে আলাদা আলাদা কনফিগারেশন প্রয়োগ করতে সহায়ক।
Ember Inspector একটি অত্যন্ত শক্তিশালী ডিবাগিং টুল যা Ember.js অ্যাপ্লিকেশনের ভিতরের কার্যক্রম পর্যবেক্ষণ এবং ডিবাগ করতে সাহায্য করে। এটি ব্রাউজারের ডেভেলপমেন্ট টুলসের মতো কাজ করে, কিন্তু বিশেষভাবে Ember.js অ্যাপ্লিকেশনের জন্য তৈরি করা হয়েছে। Ember Inspector ব্যবহার করে আপনি রুট, মডেল, কম্পোনেন্ট, অ্যাকশন এবং স্টেটের মান ইত্যাদি দেখতে এবং ডিবাগ করতে পারবেন।
Ember Inspector একটি Chrome এবং Firefox ব্রাউজার এক্সটেনশন হিসেবে উপলব্ধ।
Ember Inspector ইনস্টলেশন
Chrome বা Firefox-এ Ember Inspector ইনস্টল করতে:
- Chrome:
- Ember Inspector for Chrome লিঙ্কে যান।
- "Add to Chrome" বাটনে ক্লিক করুন এবং ইনস্টল করুন।
- Firefox:
- Ember Inspector for Firefox লিঙ্কে যান।
- "Add to Firefox" বাটনে ক্লিক করুন এবং ইনস্টল করুন।
Ember Inspector ব্যবহার শুরু করা
Ember Inspector ইনস্টল করার পর, আপনার ব্রাউজারের ডেভেলপমেন্ট টুলস (DevTools)-এ একটি নতুন ট্যাব "Ember" যুক্ত হবে।
১. Ember ট্যাব অ্যাক্সেস করা
- Chrome বা Firefox-এ আপনার Ember অ্যাপ্লিকেশন চালু করুন।
- ডেভেলপমেন্ট টুলস খোলার জন্য
F12বাCtrl + Shift + Iচাপুন। - টুলবারে "Ember" নামে একটি নতুন ট্যাব দেখতে পাবেন। এখানে ক্লিক করুন।
২. রুট (Routes) দেখতে
- Routes ট্যাবের মাধ্যমে আপনার অ্যাপ্লিকেশনের রাউট সম্পর্কিত তথ্য দেখতে পারবেন। এটি রাউটের মধ্যে চলমান স্টেট এবং মডেল ডেটা দেখায়।
৩. মডেল (Models) দেখতে
- Models ট্যাব থেকে আপনি অ্যাপ্লিকেশনের মডেল ডেটা দেখতে পারবেন। এখানে আপনার অ্যাপ্লিকেশনে ব্যবহৃত সকল মডেল এবং তাদের ডেটা যেমন ব্যবহারকারী, প্রোডাক্ট ইত্যাদি দেখতে পারবেন।
উদাহরণস্বরূপ, যদি আপনি ব্যবহারকারীদের তালিকা দেখতে চান, তবে আপনি মডেলটি নির্বাচন করে তার ফিল্ড এবং সম্পর্কিত ডেটা দেখতে পারবেন।
৪. কম্পোনেন্ট (Components) দেখতে
- Components ট্যাব আপনাকে কম্পোনেন্ট সম্পর্কিত তথ্য প্রদান করে। আপনি কোন কম্পোনেন্টে কাজ করছেন, তার প্রপার্টি এবং অ্যাকশনগুলো দেখতে পারবেন। এটি আপনাকে UI-এর স্টেট ও ইন্টারঅ্যাকশন ডিবাগ করতে সাহায্য করে।
৫. অ্যাকশনস (Actions) ট্র্যাকিং
- Actions ট্যাব ব্যবহার করে আপনি Ember অ্যাপ্লিকেশনের মধ্যে ট্রিগার হওয়া বিভিন্ন অ্যাকশন ট্র্যাক করতে পারেন। এটি আপনাকে দেখতে সাহায্য করবে যে কোন অ্যাকশন কতবার ট্রিগার হচ্ছে এবং কীভাবে তা কার্যকর হচ্ছে।
৬. স্টেট (State) দেখতে
- State ট্যাব আপনাকে অ্যাপ্লিকেশনের চলমান স্টেট বা ভিউয়ের অবস্থা দেখায়। এটি আপনার অ্যাপ্লিকেশন কিভাবে ইউজার ইন্টারঅ্যাকশনের ভিত্তিতে পরিবর্তিত হচ্ছে তা বুঝতে সাহায্য করবে।
Ember Inspector এর অন্যান্য বৈশিষ্ট্য
- চালু অবস্থায় কোড বিশ্লেষণ: আপনার অ্যাপ্লিকেশন লাইভ অবস্থায় চলার সময় কোডের ভিতরের তথ্য, যেমন মডেল, কম্পোনেন্ট, রাউট, এবং অন্যান্য ডেটা বিশ্লেষণ করা যায়।
- ডেটা চেঞ্জ ট্র্যাকিং: Ember Inspector ডেটা পরিবর্তন হলে তা ট্র্যাক করতে সহায়ক। আপনি দেখতে পারবেন কোন ডেটা পরিবর্তন হয়েছে এবং তা কোথায় প্রভাব ফেলছে।
- ডিবাগিং সহজতর করা: কোন একটি রুট বা কম্পোনেন্টে সমস্যা হলে, Ember Inspector আপনাকে সেটি সনাক্ত করতে এবং দ্রুত সমাধান করতে সহায়তা করবে।
Ember Inspector ব্যবহার করার সময় কিছু পরামর্শ
- কম্পোনেন্ট এবং রাউট স্টেট পরীক্ষা করুন: যখন অ্যাপ্লিকেশনের ভিউ পরিবর্তিত হয়, তখন Ember Inspector এর Routes এবং Components ট্যাব ব্যবহার করে স্টেট পরীক্ষা করুন। এটি আপনাকে অ্যাপ্লিকেশনের আচরণ বুঝতে সাহায্য করবে।
- অ্যাকশনগুলির পর্যবেক্ষণ করুন: অ্যাপ্লিকেশনে কোনো পরিবর্তন আনতে হলে অ্যাকশনগুলি ট্র্যাক করা প্রয়োজন। Ember Inspector এর Actions ট্যাব ব্যবহার করে আপনি সহজেই অ্যাকশনগুলির কার্যক্রম দেখতে পারবেন।
- মডেল ডেটা সঠিকভাবে পরীক্ষা করুন: যখন API থেকে ডেটা আসে, তখন মডেল ট্যাব থেকে সেগুলো পরীক্ষা করুন। এতে আপনি মডেল এবং তার সম্পর্কিত ডেটা দেখতে পাবেন, যা ডিবাগিংকে সহজ করে।
Ember Inspector হল একটি অত্যন্ত কার্যকর ডিবাগিং টুল যা Ember.js অ্যাপ্লিকেশন ডেভেলপারদের জন্য উপকারী। এটি আপনার অ্যাপ্লিকেশনকে বাস্তব সময়ে ডিবাগ করতে সহায়ক এবং উন্নয়ন প্রক্রিয়াকে দ্রুত ও কার্যকর করে তোলে। Ember Inspector ব্যবহার করে আপনি রাউট, কম্পোনেন্ট, মডেল, অ্যাকশন এবং স্টেটের পরিবর্তন ট্র্যাক করতে পারবেন, যা ডেভেলপমেন্ট এবং টেস্টিং প্রক্রিয়া আরও উন্নত করবে।
Read more